<template>
  <div class="home-map" id="home-map">

  </div>
</template>
<script>
import {ImageLayer, LineLayer, PointLayer, Popup, Scene} from '@antv/l7'
import {TencentMap} from "@antv/l7-maps";
import {inverted} from '@/utils/utils'
import Vue from "vue";
import {nanoid} from "nanoid";
import CameraDialog from "@/components/Home/MapDialog/CameraDialog.vue";
import DroneDialog from "@/components/Home/MapDialog/DroneDialog.vue";
import StationDialog from "@/components/Circle/MapDialog/StationDialog.vue";

export default {
  name: 'HomeMap',
  data() {
    return {
      scene: null
    }
  },
  methods: {
    initMap() {
      this.scene = new Scene({
        id: 'home-map',
        logoVisible: false,
        antialias: true,
        map: new TencentMap({
          zoom: 17,
          minZoom: 17,
          maxZoom: 17,
          center: [98.494247, 39.731017],
          rotateEnable: false,
          pitch: 30,
          mapStyleId: 'style1'
        })
      })
      const allLine = [
        [
          [39.734435, 98.490225],
          [39.734427, 98.492462],
          [39.734677, 98.493482],
          [39.734786, 98.494351],
          [39.734669, 98.495241],
          [39.734427, 98.496305],
          [39.734427, 98.496305],
          [39.73446, 98.498531],
          [39.732172, 98.49839],
          [39.732164, 98.490106],
          [39.734435, 98.490225],
        ],
        [
          [39.734427, 98.492462],
          [39.732164, 98.492321],
          [39.734427, 98.492462],
        ],
        [
          [39.734427, 98.496305],
          [39.732198, 98.496164],
          [39.734427, 98.496305],
        ]
      ]
      const lineData = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                ...inverted(allLine[0])
              ],
            },
          },
        ],
      }
      const lineLayer1 = new LineLayer().source(lineData).size(2)
          .color('#22DFE9')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      this.scene.addLayer(lineLayer1)
      const lineData2 = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                ...inverted(allLine[1])
              ],
            },
          },
        ],
      }
      const lineLayer2 = new LineLayer().source(lineData2).size(2)
          .color('#22DFE9')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      this.scene.addLayer(lineLayer2)
      const lineData3 = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                ...inverted(allLine[2])
              ],
            },
          },
        ],
      }
      const lineLayer3 = new LineLayer().source(lineData3).size(2)
          .color('#22DFE9')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      this.scene.addLayer(lineLayer3)

      const cameraPosition = [
        {tempId: null, name: '酒泉市人民政府(广场西路)', lngLat: {lng: 98.492436, lat: 39.734437}},
        {tempId: null, name: '酒泉市人民政府(玉门西路)', lngLat: {lng: 98.493478, lat: 39.734654}},
        {tempId: null, name: '酒泉世纪大酒店西南(世纪大道)', lngLat: {lng: 98.494212, lat: 39.734775}},
        {tempId: null, name: '酒泉世纪大酒店(玉门东路)', lngLat: {lng: 98.494212, lat: 39.734775}},
        {tempId: null, name: '酒泉世纪大酒店南(玉门东路)', lngLat: {lng: 98.495223, lat: 39.734654}},
        {tempId: null, name: '飞天大厦(广场东路)', lngLat: {lng: 98.496283, lat: 39.734423}},
        {tempId: null, name: '飞天大厦(广场东路)', lngLat: {lng: 98.496271, lat: 39.734006}},
        {tempId: null, name: '飞天大厦(广场东路)', lngLat: {lng: 98.496247, lat: 39.733511}},
        {tempId: null, name: '飞天大厦(广场东路)南', lngLat: {lng: 98.496235, lat: 39.733187}},
        {tempId: null, name: '酒泉市人民政府(广场东路)', lngLat: {lng: 98.496204, lat: 39.732743}},
        {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.49618, lat: 39.732201}},
        {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.494429, lat: 39.732187}},
        {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.494423, lat: 39.732196}},
        {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.49414, lat: 39.732201}},
        {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.493081, lat: 39.732196}},
        {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.492322, lat: 39.732196}},
        {tempId: null, name: '酒泉市人民政府(广场西路)', lngLat: {lng: 98.492334, lat: 39.732627}},
        {tempId: null, name: '酒泉市人民政府(广场西路)', lngLat: {lng: 98.492394, lat: 39.733516}},
        {tempId: null, name: '洪洋财富大厦(广场东路)', lngLat: {lng: 98.496073, lat: 39.730485}},
        {tempId: null, name: '肃州区中国人民银行酒泉市分行(广场西路西)', lngLat: {lng: 98.491841, lat: 39.73352}},
        {tempId: null, name: '酒泉市人民政府西南(广场西路)', lngLat: {lng: 98.492296, lat: 39.732051}},
        {tempId: null, name: '酒泉图书馆(广场西路)', lngLat: {lng: 98.492187, lat: 39.729889}},
        {tempId: null, name: '中盛佳苑(广场西路)', lngLat: {lng: 98.492151, lat: 39.729255}},
        {tempId: null, name: '创通商务大酒店(广场西路)', lngLat: {lng: 98.490827, lat: 39.727755}},
        {tempId: null, name: '世纪广场(敦煌路)', lngLat: {lng: 98.491934, lat: 39.727727}},
        {tempId: null, name: '世纪广场(敦煌路)', lngLat: {lng: 98.493915, lat: 39.727727}},
        {tempId: null, name: '品鑫大酒店(敦煌路)', lngLat: {lng: 98.497003, lat: 39.727704}},
        {tempId: null, name: '洪洋商业广场(广场东路)', lngLat: {lng: 98.49681, lat: 39.728019}},
        {tempId: null, name: '乐都KTV(广场东路店)', lngLat: {lng: 98.496455, lat: 39.728565}},
        {tempId: null, name: '洪洋商业广场(广场东路)', lngLat: {lng: 98.496033, lat: 39.729884}},
        {tempId: null, name: '洪洋商业广场(宝泉东路)', lngLat: {lng: 98.496039, lat: 39.728565}},
        {tempId: null, name: '洪洋商业广场(宝泉东路)', lngLat: {lng: 98.496037, lat: 39.729916}},
        {tempId: null, name: '酒泉市财政局(广场东路)', lngLat: {lng: 98.496163, lat: 39.731627}},
        {tempId: null, name: '酒泉市人民政府(广场东路)', lngLat: {lng: 98.496171, lat: 39.732131}},
        {tempId: null, name: '中旺佳苑东北(玉门西路)', lngLat: {lng: 98.490247, lat: 39.734424}},
        {tempId: null, name: '酒泉市肃州区人民法院(富康路)', lngLat: {lng: 98.49008, lat: 39.73218}},
        {tempId: null, name: '酒泉鑫惠成大酒店(宝泉西路)', lngLat: {lng: 98.489956, lat: 39.729858}},
        {tempId: null, name: '正信大厦东(飞天路)', lngLat: {lng: 98.487636, lat: 39.72887}},
        {tempId: null, name: '伊鼎火锅(敦煌路店)南', lngLat: {lng: 98.487619, lat: 39.727674}},
        {tempId: null, name: '酒泉宏兴国际大酒店南(神舟路)', lngLat: {lng: 98.49832, lat: 39.737583}},
        {tempId: null, name: '家福超市(神舟路店)', lngLat: {lng: 98.498303, lat: 39.735923}},
        {tempId: null, name: '星宇夜音乐餐吧旗舰店(神舟路)', lngLat: {lng: 98.498505, lat: 39.734459}},
        {tempId: null, name: '酒泉市市场监督管理局(富康路)', lngLat: {lng: 98.498382, lat: 39.73217}},
        {tempId: null, name: '洪洋商业广场(神舟路)', lngLat: {lng: 98.498232, lat: 39.729893}},
        {tempId: null, name: '洪洋商业广场(宝泉东路)', lngLat: {lng: 98.498179, lat: 39.729883}},
        {tempId: null, name: '洪洋商业广场(敦煌路)', lngLat: {lng: 98.498126, lat: 39.727654}},
        {tempId: null, name: '万达广场(酒泉肃州店)东南', lngLat: {lng: 98.487625, lat: 39.732187}},
        {tempId: null, name: '酒泉丝路文华假日酒店东北50米(宝泉西路)', lngLat: {lng: 98.48755, lat: 39.729856}},
        {tempId: null, name: '西峰镇G312(万达广场)', lngLat: {lng: 98.487646, lat: 39.734425}},
        {tempId: null, name: '酒泉金凯悦假日酒店东南(风电大道)', lngLat: {lng:98.487854, lat: 39.73775}},
        {tempId: null, name: '西峰镇G312(万达广场)', lngLat: {lng:98.48767, lat: 39.734429}},
        {tempId: null, name: '酒泉市博物馆东50米(世纪大道东)', lngLat: {lng:98.493966, lat: 39.737695}},
        {tempId: null, name: '酒泉宏兴国际大酒店(盘旋西路)', lngLat: {lng:98.498357, lat: 39.737677}},
        {tempId: null, name: '成林大厦(盘旋西路)', lngLat: {lng:98.500273, lat: 39.737607}},
        {tempId: null, name: '酒泉光明大酒店西(肃州路)', lngLat: {lng:98.501028, lat: 39.737042}},
        {tempId: null, name: '富康家世界办公家具区(肃州路店)西北', lngLat: {lng:98.500677, lat: 39.73218}},
        {tempId: null, name: '速8酒店(酒泉市政府油田医院店)西北50米', lngLat: {lng:98.500531, lat: 39.727561}},
        {tempId: null, name: '酒泉市博物馆(盘旋西路)', lngLat: {lng:98.492437, lat: 39.737764}},
        {tempId: null, name: '酒泉市中医院(盘旋西路)', lngLat: {lng:98.495698, lat: 39.737614}},
        {tempId: null, name: '酒泉市自然资源局肃州分局(肃州路)', lngLat: {lng:98.500879, lat: 39.734991}},
        {tempId: null, name: '交通银行(酒泉分行营业部)', lngLat: {lng:98.500618, lat:39.731477}},
        {tempId: null, name: 'VPARTY旗舰店(酒泉富康店)西南', lngLat: {lng:98.500614, lat:39.728579}},
      ]
      for (let item of cameraPosition) {
        const layer = new ImageLayer({});
        const size = {x: 0.0002, y: 0.0002}
        const offset = {x: -0.0001, y: 0.0001}
        layer.source(require('@/assets/images/camera.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = cameraPosition.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])
          const id = 'camera-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="camera-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(CameraDialog)
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)

        })
        this.scene.addLayer(layer)
      }
      const dronePosition = [
        {tempId: null, name: '酒泉市市政大厦无人机回传画面', lngLat: {lng: 98.494869, lat: 39.731676}}
      ]
      for (const item of dronePosition) {
        const layer = new ImageLayer({});
        const size = {x: 0.0004, y: 0.0004}
        const offset = {x: 0.0000, y: 0.0001}
        layer.source(require('@/assets/images/drone.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = dronePosition.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])

          const id = 'drone-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="drone-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(DroneDialog)
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }
      const policeStation=[{
        tempId: null,
        lngLat: {
          lng: 98.495878,
          lat: 39.731747,
        },
        name: '市政警务站',
        type: '一类警务站',
        address: '酒泉市肃州区广场东路',
        photo:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/WechatIMG48.jpeg'
      }]
      for (let item of policeStation) {
        const layer = new ImageLayer({});
        const size = {x: 0.0003, y: 0.0002}
        const offset = {x: -0.0001, y: 0.0001}
        layer.source(require('@/assets/images/police-room.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = policeStation.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])
          const id = 'station-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="station-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(StationDialog,{
                  props:{
                    info:point
                  }
                })
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }
      const layer = new ImageLayer({});
      const size = {x: 0.0004, y: 0.0003}
      const offset = {x: 0.0000, y: 0.0001}
      const petition = {
        lngLat: {
          lng: 98.496584,
          lat: 39.731222,
        }
      }
      layer.source(require('@/assets/images/petition.png'), {
        parser: {
          type: 'image',
          extent: [
            petition.lngLat.lng - size.x + offset.x, petition.lngLat.lat - size.y + offset.y, petition.lngLat.lng + size.x + offset.x, petition.lngLat.lat + size.y + offset.y
          ],
        },
      });
      this.scene.addLayer(layer)
      const petitionTextLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '信访局'
            },
            geometry: {
              type: 'Point',
              coordinates: [98.496584,39.731222]
            }
          }
        ]
      }).shape('name','text').color('#EA0000').style({
        textAnchor:'center',
        spacing:2,
        opacity:1,
        fontWeight:900
      }).size(16)
      this.scene.addLayer(petitionTextLayer)
    },
  },
  mounted() {
    this.initMap();
  }
}
</script>
<style lang="scss">
.home-map {
  .l7-marker-container {
    z-index: 3 !important;
  }

  .l7-popup {
    width: auto !important;
    .l7-popup-tip {
      display: none;
    }

    .l7-popup-content {
      width: auto !important;
      background: url("~@/assets/images/map-dialog-background.png") no-repeat center;
      background-size: 100% 100%;
      padding: 12px;
      position: relative;

      .l7-iconfont.l7-popup-close-button {
        display: none;
      }

      .l7-popup-content__title {
        color: $fontColorMain;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.home-map {
  width: 100%;
  height: 100%;
}
</style>
